<template>
    <div class="appointment-details">
        <!-- 状态栏 -->
        <div class="status-bar">
            <div class="time">9:41</div>
            <div class="status-icons">
                <div class="signal"></div>
                <div class="wifi"></div>
                <div class="battery"></div>
            </div>
        </div>

        <!-- 导航栏 -->
        <div class="nav-bar">
            <div class="nav-left">
                <!-- <i class="arrow-left" @click="goBack">←</i> -->
            </div>
            <div class="nav-title">确认预约信息</div>
            <div class="nav-right">
                <i class="dots">⋯</i>
                <i class="target">⊙</i>
            </div>
        </div>

        <!-- 主要内容区域 -->
        <div class="content">
            <!-- 医生信息 -->
            <div class="doctor-section">
                <div class="doctor-avatar"></div>
                <div class="doctor-info">
                    <div class="doctor-name">{{ doctorName }}</div>
                    <div class="doctor-title">{{ attendingName }}</div>
                </div>
            </div>

            <!-- 医院信息 -->
            <div class="hospital-section">
                <div class="info-item">
                    <span class="label">就诊医院</span>
                    <span class="value">{{ attending }}</span>
                </div>
                <div class="info-item">
                    <span class="label">医院地址</span>
                    <BaiduMapComponent :doctor-address="doctorAddress" />
                </div>
                <div class="info-item">
                    <span class="label">就诊科室</span>
                    <span class="value">{{ department }}</span>
                </div>
            </div>

            <!-- 预约详情 -->
            <div class="appointment-section">
                <div class="info-item">
                    <span class="label">门诊时间</span>
                    <OutpatientTimeImage :outpatient-time="outpatientTime" />
                </div>
                <div class="info-item">
                    <span class="label">候诊时间</span>
                    <span class="value">{{ moment(waitingTime).format('HH:mm') }}</span>
                </div>
                <div class="info-item">
                    <span class="label">费用</span>
                    <span class="value cost">¥{{ cost }} (就诊时支付)</span>
                </div>
                <div class="info-item">
                    <span class="label">预约时间</span>
                    <AppointmentTimeImage :appointment-time="appointmentTime" />
                </div>
            </div>

            <!-- 患者信息 -->
            <div class="patient-section">
                <div class="info-item">
                    <span class="label">就诊人</span>
                    <span class="value">{{ registerName }}</span>
                </div>
                <div class="info-item">
                    <span class="label">身份证号</span>
                    <span class="value">{{ idCardNum.substring(0, 3) + '****' + idCardNum.substring(idCardNum.length
                        - 5) }}</span>
                </div>
            </div>
        </div>

        <!-- 底部 -->
        <div class="footer">
            <div class="instruction">
                挂号前仔细阅读<router-link to="#" class="link">《挂号须知》</router-link>
            </div>
            <button class="confirm-btn" @click="appAdding">确认预约</button>
        </div>
    </div>
</template>

<script setup lang="ts">
// @ts-ignore
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import moment from 'moment'
import axios from 'axios'
// @ts-ignore
import { ElMessage } from 'element-plus'
import OutpatientTimeImage from '@/components/OutpatientTimeImage.vue'
import AppointmentTimeImage from '@/components/AppointmentTimeImage.vue'
import BaiduMapComponent from '@/components/BaiduMapComponent.vue'
const route = useRoute()
const router = useRoute()

// 定义接口
interface AppointmentDetails {
    attending: string
    doctorAddress: string
    department: string
    attendingName: string
    doctorName: string
    // registTypeId: number
    outpatientTime: string
    waitingTime: string
    cost: number
    appointmentTime: string
    medicalState: boolean
    // reason: string
    // cancelTime: string
    desc: string
    registerName: string
    // patientId: number
    // relationship: string
    // name: string
    // idCardType: string
    idCardNum: string
    // medicalCard: string
    // phone: string
    // departmentName: string
}
// 返回上一页
// const goBack = () => {
//     router.go(-1)
// }

// 预约功能
const appAdding = () => {
    // @ts-ignore
    axios.post('http://localhost:5250/api/Appoint/AddAppoint', {
        appointments: appointmentData
    })
        .then(res => {
            if (res.data.code === 200) {
                ElMessage.success('预约成功')
                // 预约成功后跳转到预约记录页面
                setTimeout(() => {
                    // router.push('/appointment-records')
                }, 1500)
            } else {
                ElMessage.error('预约失败')
            }
        })
        .catch(error => {
            console.error('预约失败:', error)
            ElMessage.error('预约失败，请重试')
        })
}


// 模拟数据
const appointmentData = ref<AppointmentDetails>({
    attending: '',
    doctorAddress: '',
    department: '',
    attendingName: '',
    doctorName: '',
    // registTypeId: 0,
    outpatientTime: '',
    waitingTime: '',
    cost: 0,
    appointmentTime: '',
    medicalState: true,
    // reason: '',
    // cancelTime: '',
    desc: '',
    registerName: '',
    // patientId: 0,
    // relationship: '',
    // name: '',
    // idCardType: '',
    idCardNum: '',
    // medicalCard: '',
    // phone: '',
    // departmentName: ''
})

// 从路由参数获取患者信息并更新数据
const updatePatientInfo = () => {
    // 获取所有路由参数
    const query = route.query

    // 更新患者基本信息
    // if (query.name) appointmentData.value.name = query.name as string
    if (query.registerName) appointmentData.value.registerName = query.registerName as string
    // if (query.relationship) appointmentData.value.relationship = query.relationship as string
    // if (query.idCardType) appointmentData.value.idCardType = query.idCardType as string
    if (query.idCardNum) appointmentData.value.idCardNum = query.idCardNum as string
    // if (query.medicalCard) appointmentData.value.medicalCard = query.medicalCard as string
    // if (query.phone) appointmentData.value.phone = query.phone as string
    // if (query.patientId) appointmentData.value.patientId = parseInt(query.patientId as string) || 0

    // 更新预约信息
    if (query.attending) appointmentData.value.attending = query.attending as string
    if (query.doctorAddress) appointmentData.value.doctorAddress = query.doctorAddress as string
    if (query.department) appointmentData.value.department = query.department as string
    // if (query.departmentName) appointmentData.value.departmentName = query.departmentName as string
    if (query.attendingName) appointmentData.value.attendingName = query.attendingName as string
    if (query.doctorName) appointmentData.value.doctorName = query.doctorName as string
    // if (query.registTypeId) appointmentData.value.registTypeId = parseInt(query.registTypeId as string) || 0
    if (query.outpatientTime) appointmentData.value.outpatientTime = query.outpatientTime as string
    if (query.waitingTime) appointmentData.value.waitingTime = query.waitingTime as string
    if (query.cost) appointmentData.value.cost = parseInt(query.cost as string) || 0
    if (query.appointmentTime) appointmentData.value.appointmentTime = query.appointmentTime as string
    if (query.medicalState) appointmentData.value.medicalState = query.medicalState === 'true'
    // if (query.reason) appointmentData.value.reason = query.reason as string
    // if (query.cancelTime) appointmentData.value.cancelTime = query.cancelTime as string
    if (query.desc) appointmentData.value.desc = query.desc as string
}

// 初始化时更新患者信息
updatePatientInfo()

// 使用计算属性来响应式获取数据
const attending = computed(() => appointmentData.value.attending)
const doctorAddress = computed(() => appointmentData.value.doctorAddress)
const department = computed(() => appointmentData.value.department)
const attendingName = computed(() => appointmentData.value.attendingName)
const doctorName = computed(() => appointmentData.value.doctorName)
const outpatientTime = computed(() => appointmentData.value.outpatientTime)
const waitingTime = computed(() => appointmentData.value.waitingTime)
const cost = computed(() => appointmentData.value.cost)
const appointmentTime = computed(() => appointmentData.value.appointmentTime)
const registerName = computed(() => appointmentData.value.registerName)
const idCardNum = computed(() => appointmentData.value.idCardNum)
</script>

<style scoped>
.appointment-details {
    min-height: 100vh;
    background-color: #f5f5f5;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 状态栏 */
.status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 16px;
    background-color: #000;
    color: white;
    font-size: 14px;
    font-weight: 600;
}

.status-icons {
    display: flex;
    gap: 4px;
}

.signal,
.wifi,
.battery {
    width: 16px;
    height: 12px;
    background-color: white;
    border-radius: 2px;
}

/* 导航栏 */
.nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;
}

.nav-left,
.nav-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.nav-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.arrow-left,
.dots,
.target {
    font-size: 20px;
    color: #666;
    cursor: pointer;
}

/* 内容区域 */
.content {
    padding: 16px;
    background-color: white;
    margin: 8px;
    border-radius: 8px;
}

/* 医生信息 */
.doctor-section {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.doctor-avatar {
    width: 60px;
    height: 60px;
    background-color: #e3f2fd;
    border-radius: 8px;
    margin-right: 16px;
}

.doctor-info {
    flex: 1;
}

.doctor-name {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
}

.doctor-title {
    font-size: 14px;
    color: #666;
}

/* 信息项 */
.info-item {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 8px 0;
}

.label {
    font-size: 14px;
    color: #666;
    min-width: 80px;
    margin-right: 12px;
}

.value {
    font-size: 14px;
    color: #333;
    flex: 1;
}

.cost {
    color: #ff4444;
    font-weight: 600;
}

.location-icon {
    margin-left: 8px;
    font-size: 12px;
}

/* 分组样式 */
.hospital-section,
.appointment-section,
.patient-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.patient-section {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* 底部 */
.footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: white;
    padding: 16px;
    border-top: 1px solid #e0e0e0;
}

.instruction {
    text-align: center;
    font-size: 12px;
    color: #666;
    margin-bottom: 12px;
}

.link {
    color: #1976d2;
    text-decoration: none;
}

.confirm-btn {
    width: 100%;
    height: 48px;
    background-color: #1976d2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s;
}

.confirm-btn:hover {
    background-color: #1565c0;
}

.confirm-btn:active {
    background-color: #0d47a1;
}

/* 响应式设计 */
@media (max-width: 480px) {
    .content {
        margin: 4px;
        padding: 12px;
    }

    .nav-bar {
        padding: 8px 12px;
    }

    .footer {
        padding: 12px;
    }
}
</style>
